<stbui-search
  placeholder="输入资源名称"
  class="mat-elevation-z4 m-b-16"
></stbui-search>

<div class="mat-elevation-z4">
  <div class="table-container">
    <table class="table-hover" mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="ip">
        <th mat-header-cell *matHeaderCellDef>访问者IP</th>
        <td mat-cell *matCellDef="let element">{{ element.ip }}</td>
      </ng-container>

      <ng-container matColumnDef="browser">
        <th mat-header-cell *matHeaderCellDef>浏览器</th>
        <td mat-cell *matCellDef="let element">{{ element.browser }}</td>
      </ng-container>

      <ng-container matColumnDef="system">
        <th mat-header-cell *matHeaderCellDef>操作系统</th>
        <td mat-cell *matCellDef="let element">{{ element.system }}</td>
      </ng-container>

      <ng-container matColumnDef="star" stickyEnd>
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td
          mat-cell
          *matCellDef="let element"
          (click)="onDetailClicked(element); $event.stopPropagation()"
        >
          详情
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns"
        (click)="onRowClicked(row, $event)"
      ></tr>
    </table>
  </div>
  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>
